<template>

  <div class="home">
    <div class="funs">
      <div class="funtxt">
        <h1>快捷租车</h1>
        <span>畅想租车新体验</span>
      </div>
      <div class="cs">
        <div class="item">
          <div class="itemlabel">送车上门</div>
          <div class="itemipt clearfix">
            <div class="fl" @click="showmap = true"><i class="iconfont icon-shouhuodizhi"></i> {{saddress }}</div>
          </div>
        </div>
        <div class="cdate">
          <div class="sdate" @click="showsdate">
            <span>取车</span>
            <div> {{ sdate | moment('MM / DD') }}</div>
            <div> {{ edate | moment(" HH : mm ") }}</div>
          </div>
          <div class="rdate">
            <div v-html="countDatestr"></div>
          </div>
          <div class="sdate" @click="showedate">
            <span>还车</span>
            <div> {{ edate | moment('MM / DD') }} </div>
            <div> {{ edate | moment(" HH : mm ") }}</div>
          </div>
        </div>
        <div class="cbtn" @click="tolist">
          去选车
        </div>

      </div>

    </div>

    <md-date-picker
      v-model="sDatePickerShow"
      ref="sdatepicker"
      type="custom"
      today-text="今天"
      title="选择取车时间"
      :minDate="minDate"
      :default-date="currentDate1"
      is-twelve-hours
      :custom-types="[ 'MM','dd', 'hh', 'mm']"
      :minute-step="15"
      @initialed="onDatePickerInitialed"
      @confirm="onDatePickerConfirms"
    ></md-date-picker>

    <md-date-picker
      v-model="eDatePickerShow"
      ref="sdatepicker"
      type="custom"
      today-text="(今天)"
      is-twelve-hours
      title="选择还车时间"
      :default-date="currentDate2"
      :custom-types="[ 'MM','dd', 'hh','mm']"
      :minute-step="15"
      @initialed="onDatePickerInitialed"
      @confirm="onDatePickerConfirme"
    ></md-date-picker>
    <div class="map" v-show="showmap" style="display: flex;flex-direction: column">
      <div class="maphd clearfix">
        <div class="mipt">
          <input type="text" placeholder="输入您的地址" @input="searchMap($event)">
        </div>
        <div class="mbtn" @click="showmap = false">取消</div>
      </div>
      <div class="maplist" style="flex-grow: 1;height: 0;overflow-y: scroll ">
        <div class="mapitem" v-for="item of mapres" @click="updateAddress(item)" :key="item.id">
          <div>{{item.name}}</div>
          <div >{{item.address}}</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

import { Toast } from 'mand-mobile'
export default {
  name: 'Home',
  data () {
    return {
      showmap: false,
      minDate: new Date(),
      currentDate1: new Date(),
      currentDate2: new Date(),
      sDatePickerShow: false,
      eDatePickerShow: false,
      sdate: new Date(),
      edate: new Date(),
      countDatestr: ` <span style="display:block;font-size: 20px;margin-top: 30px;">请选择</span>`,
      searchOption: {
        city: '南宁',
        citylimit: true
      },
      mapCenter: [121.59996, 31.197646],
      markers: [
        [121.59996, 31.197646],
        [121.40018, 31.197622],
        [121.69991, 31.207649]
      ],
      mapres: [],
      saddress: '定位中..'
    }
  },
  created: async function () {
    let _d = new Date()
    _d.setDate(_d.getDate() + 2)
    this.currentDate2 = _d
    _d.setHours(0)
    _d.setMinutes(0)
    this.minDate = _d
    this.edate = _d

    if (!this.$store.state.wxuser.openid && this.$route.query.openid) {
      // 根据 openid来获取用户信息
      let _u = await this.$api.post('/getUser', this.$route.query)
      if (_u.data.state) {
        this.$store.commit('updateUser', _u.data.data)
      } else {
        Toast.failed('获取用户失败')
      }
    }
  },
  mounted: async function () {
    this.countDate()
  },
  methods: {
    onDatePickerInitialed: async function () {
      // console.log(`[Mand Mobile] DatePicker getFormatDate: ${this.$refs.sdatepicker.getFormatDate('yyyy/MM/dd')}`)
      // console.log(`[Mand Mobile] DatePicker getFormatDate: ${this.$refs.edatepicker.getFormatDate('yyyy/MM/dd')}`)
    },
    onDatePickerConfirms: async function (columnsValue) {
      let _d = new Date()
      _d.setMonth(columnsValue[0].value - 1)
      _d.setDate(columnsValue[1].value)
      _d.setHours(columnsValue[2].value)
      _d.setMinutes(columnsValue[3].value)
      if (_d > this.sdate) {
        Toast.failed('取车时间不能小于开车时间')
        return false
      }
      this.sdate = _d
      this.countDate()
    },
    onDatePickerConfirme: async function (columnsValue) {
      let _d = new Date()
      _d.setMonth(columnsValue[0].value - 1)
      _d.setDate(columnsValue[1].value)
      _d.setHours(columnsValue[2].value)
      _d.setMinutes(columnsValue[3].value)
      if (_d < this.sdate) {
        Toast.failed('取车时间不能小于开车时间')
        return false
      }

      this.edate = _d
      this.countDate()

      console.log(this.edate)
      console.log(this.sdate)
    },
    showsdate: async function () {
      this.sDatePickerShow = true
    },
    showedate: async function () {
      this.eDatePickerShow = true
    },
    countDate: function () {
      let _d = parseInt((this.edate - this.sdate) / 1000)
      let _day = parseInt(_d / (24 * 60 * 60))
      let _hour = parseInt((_d % (24 * 60 * 60)) / (60 * 60))

      this.countDatestr = `<span style="display:block;font-size: 20px;margin-top: 30px;">${_day}天</span>`
      if (_hour > 0) {
        this.countDatestr += `<span>${_hour}个小时</span>`
      }

      this.$store.commit('updateOrder', {sdate: this.sdate, edate: this.edate})
    },
    tolist: function () {
      this.$router.push({name: 'List'})
    },
    searchMap: async function (ev) {
      console.log(ev.target.value)
      let _res = await this.$api.get('https://restapi.amap.com/v3/place/text', {params: {
        key: 'e2c4f60587c2581f55c985731bb98992',
        keywords: ev.target.value,
        city: '南宁',
        citylimit: true,
        extensions: 'all'
      }})

      if (_res.data.status) {
        this.mapres = _res.data.pois
      }
    },
    updateAddress: async function (pos) {
      this.saddress = pos.name
      this.showmap = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .br{
    border:1px solid red;
  }
  .home{
    background:url("../assets/bg.jpg") no-repeat;
    background-size: contain;
    position:relative;
  }

  .map{
    position:absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
  }
  .funs{
    height: 80%;
    width: 90%;
    position: absolute;
    bottom:15px;
    left:50%;
    transform: translateX(-50%);
  }
  .funtxt{
    height: 100px;
    color:#fff;
    text-shadow: 2px 2px 2px #ccc;
  }
  .funtxt > span{
    line-height: 50px;
  }
  .cs{

    position: absolute;
    bottom:0;
    background: #fff;
    width: 100%;
    border-radius: 5px;
    box-shadow: 2px 2px 3px rgba(0,0,0,.1);
    padding:15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .itemlabel{
    font-size: 12px;
    color:#666;

  }

  .itemipt{
    line-height: 50px;
    border-bottom:1px solid #e1e1e1
  }

  .cdate{
    margin:25px 0;
    position: relative;
    height: 120px;
  }
  .cdate>.rdate{

    height: 120px;
    width: 120px;
    border-radius: 50%;
    border:1px solid #6a78d0;
    left:50%;
    transform: translateX(-50%);
    position: absolute;
    text-align: center;
  }

  .sdate{
    width: 30%;
  }

  .sdate>span{
    font-size: 12px;
    color:#666;
    text-align: left;
  }
  .sdate>div:first-of-type{
    font-size: 18px;
  }

  .sdate:first-of-type{
    top:50%;
    transform: translateY(-50%);
    left:0;
    position: absolute;
  }
  .sdate:last-of-type{
    top:50%;
    transform: translateY(-50%);
    text-align: right;
    right:0;
    position:absolute;
  }
  .sdate>div:last-child{
    font-size: 12px;
    color:#666;
  }
  .cbtn{
    text-align: center;
    line-height: 55px;
    background: -webkit-linear-gradient(top left,#7986db,#6a78d0);
    color:#fff
  }
  .amap-demo {
    height: 300px;
  }

  .search-box {
    position: absolute;
    top: 25px;
    left: 20px;
  }

  .amap-page-container {
    position: relative;
  }
  .maphd{
    height: 50px;
    border-bottom:1px solid #d6d6d6;
    position:relative;
  }
  .maphd .mbtn{
    position: absolute;
    width: 40px;
    height: 30px;
    border: 1px solid #000;
    right:5px;
    top:50%;
    transform: translateY(-50%);
    font-size: 12px;
    line-height: 30px;
    text-align: center;

  }
  .mipt{
    line-height: 50px;
    padding-left:10px
  }
  .mipt > input{
    width: 100%;
    height: 100%;
    outline:none;
    border:none;
    line-height: 50px;

  }
  .mapitem{
    padding:15px;
    line-height:15px;
    border-bottom:1px solid #e8e8e8
  }
  .mapitem > div:first-of-type{

  }
  .mapitem > div:last-of-type{
    line-height:15px;
    color:#666;
    font-size: 12px;
  }
</style>
